<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 光的代言人
  Date: 2024/12/17
  Time: 20:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品详情 - 在线购物商城</title>
    <link rel="stylesheet" href="../css/head.css">
    <link rel="stylesheet" href="../css/detail.css">
</head>
<body>

<div class="header">
    <div class="header-content">
        <a href="/shopping/list" class="logo">在线购物商城</a>
        <form class="search-box" action="/shopping/list" method="get">
            <input type="text" class="search-input" placeholder="请输入商品名称" name="searchName">
            <button class="search-btn">搜索</button>
        </form>
        <ul class="clearfix user-actions">
            <li>
                <a href="/shopping/cartInfo/list">购物车</a>
            </li>
            <li>
                <a href="">我的订单</a>
            </li>
            <li>
                <a href="">个人中心
                    <ul class="downlist clearfix">
                        <li>
                            <a href="">修改个人信息</a>
                        </li>
                        <li>
                            <a href="">修改收货地址</a>
                        </li>
                        <li>
                            <a href="/login">退出登录</a>
                        </li>
                    </ul>
                </a>
            </li>
        </ul>
    </div>
</div>

<div class="container">
        <div class="product-gallery">
            <img src="/goodsPic/${goodsSingleInfo.pic}" alt="" class="main-image">
        </div>
    <form action="/shopping/detail?goods_id=${goodsSingleInfo.goods_id}" method="post">
        <div class="product-info">

            <h1 class="product-title">
                <span class="promotion-tag">人气爆款</span>
                ${goodsSingleInfo.goods_name}
            </h1>

            <div class="price-section">
                <div class="price-label">销售价</div>
                <div class="price" name="price">${goodsSingleInfo.price}</div>
            </div>

            <div class="product-details">
                <div class="detail-item">
                    <div class="detail-label">商品名称：</div>
                    <div class="detail-content">${goodsSingleInfo.goods_name}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">生产厂家：</div>
                    <div class="detail-content">${goodsSingleInfo.manufacturer}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">商品介绍：</div>
                    <div class="detail-content">
                        <div class="product-description">
                            ${goodsSingleInfo.description}
                        </div>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label">数量：</div>
                    <div class="detail-content" style="display: flex; align-items: center;">
                        <div class="quantity-controls">
                            <span class="quantity-btn" onclick="updateQuantity(-1)">-</span>
                            <input type="text" class="quantity-input" name="quantity" value="1" readonly>
                            <span class="quantity-btn" onclick="updateQuantity(1)">+</span>
                        </div>

                    </div>
                </div>
            </div>

            <div class="action-buttons">
<%--                <button class="buy-now">立即购买</button>--%>
                <a href="/shopping/orderInfo/add?id=${goodsSingleInfo.goods_id}&quantity=<%=request.getParameter("quantity")%>" class="buy-now">立即购买</a>
                <button class="add-to-cart">加入购物车</button>
            </div>
        </div>
    </form>

</div>
<script>
    function updateQuantity(change) {
        const input = document.querySelector('.quantity-input');
        let value = parseInt(input.value) + change;
        if (value < 1) value = 1;
        if (value > 99) value = 99;
        input.value = value;
    }
</script>
</body>
</html>
